﻿<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>NetVisionX</title>
    <link rel="shortcut icon" href="#">
    <link rel="stylesheet" href='{{ url_for("static",filename="css/complex/index.css") }}' />
    <link rel="stylesheet" href='{{ url_for("static",filename="css/complex/reset.css") }}' />
    <link rel="stylesheet" href='{{ url_for("static",filename="css/complex/bootstrap.min.css") }}'>
    <link rel="stylesheet" href="{{ url_for("static",filename="css/complex/network-analysis.css") }}">
    <script src='{{ url_for("static",filename="js/complex/jquery.min.js") }}'></script>
    <script src='{{ url_for("static",filename="js/complex/bootstrap.min.js") }}'></script>
	<script type="text/javascript" src="{{ url_for("static",filename="js/echarts.min.js") }}"></script>
	<!--下面是模板布局需要的-->
	<script type="text/javascript" src='{{ url_for("static",filename="js/jquery-3.2.1.min.js") }}'></script>
	<!--<script type="text/javascript" src='{{ url_for("static",filename="js/model-js/echarts.min.js") }}'></script>-->
	<!--<script type="text/javascript" src='{{ url_for("static",filename="js/model-js/area_echarts.js") }}'></script>-->
	<!--<script type="text/javascript" src='{{ url_for("static",filename="js/model-js/js.js") }}'></script>-->
	<link rel="stylesheet" href="{{ url_for("static",filename="css/model-css/style.css") }}">
	<style>

		table {
			width: 100%;
			border-collapse: separate; /* 让圆角生效 */
			border-spacing: 0; /* 取消单元格间距 */
			border-radius: 15px; /* 圆角边框 */
			overflow: hidden; /* 确保边框圆角不被单元格遮挡 */
			border: 2px solid #4a90e2; /* 蓝色协调边框 */
		}
		
		th, td {
			padding: 10px 15px;
			border: 1px solid #80b3ff; /* 柔和的蓝色边框 */
			text-align: left;
		}
		
		th {
			background-color: #4a90e2; /* 深蓝色标题 */
			color: white;
			font-weight: bold;
		}
		

	</style>
</head>

<body style="background-color: rgb(29, 43, 86);">
<div id="particles-js" style="background-color: rgb(29, 43, 86);">
	<div class="head clearfix">
		<h1 class="">NetVisionX</h1>
		<div class="time" id="showTime"></div>
		<script>
			var t = null;
			t = setTimeout(time, 1000);//開始运行
			function time() {
				clearTimeout(t);//清除定时器
				dt = new Date();
				var y = dt.getFullYear();
				var mt = dt.getMonth() + 1;
				var day = dt.getDate();
				var h = dt.getHours();//获取时
				var m = dt.getMinutes();//获取分
				var s = dt.getSeconds();//获取秒
				document.getElementById("showTime").innerHTML = y + "/" + mt + "/" + day + " " + h + ":" + m + ":" + s + "";
				t = setTimeout(time, 1000); //设定定时器，循环运行     
			}

		</script>
	</div>
	<div class="mainbox">
		<ul class="clearfix nav1">
			<li style="width: 22%">
				<div class="box">
					<div class="tit">
						<span class="btn-group cus_btn btn-group-xs" style="width: 80%">
							<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle"
								style="width: 100%; background-color: transparent; border-width: 0px; font-size: 20px;">
								（重）连通向量
							</button>
							<ul tabindex="-1" class="dropdown-menu dropdown-menu-addon">
								<li><a href="#" id="nkit_getConnectedComponents"
									style="text-decoration: none;color: black" title="连通向量">连通向量</a>
								</li>
								<li><a href="#" id="nkit_getBiConnectedComponents"
									style="text-decoration: none;color: black" title="重连通向量">重连通向量</a>
								</li>
							</ul>
						</span>
						<p></p>
					</div>
					<div class="boxnav" style="height: 320px;">
						<!--左上-->
						<!--连通向量-->
						<!--重连通向量-->
					<div id="vector" class="biankuang main_bottom_b_con3"></div>
				</div>
				<div class="box">
					<div class="tit">
						
						<span class="btn-group cus_btn btn-group-xs" style="width: 80%">
							<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle"
								style="width: 100%; background-color: transparent; border-width: 0px; font-size: 20px;">
								节点中心性指标
							</button> 
							<ul tabindex="-1" class="dropdown-menu dropdown-menu-addon" id="nodeAlgo">
								<li><a tabindex="-1" href="#" id="algo1" title="网络中节点的度中心性">度中心性</a>
								</li>
								<li><a tabindex="-1" href="#" id="algo2" title="网络中节点的紧密度中心性">紧密度中心性</a>
								</li>
								<li><a tabindex="-1" href="#" id="algo3" title="网络中节点的介数中心性">介数中心性</a>
								</li>
								<li><a tabindex="-1" href="#" id="algo4" title="网络中边的介数中心性">边介数中心性</a>
								</li>
								<li><a tabindex="-1" href="#" id="algo5" title="网络中的流紧密中心性">流紧密度中心性</a>
								</li>
								<li><a tabindex="-1" href="#" id="algo6" title="网络中的流介数中心性">流介数中心性</a>
								</li>
								<!--                                        <li><a tabindex="-1" href="#" id="algo7" title="网络中的特征向量中心性">特征向量中心性</a>-->
								<!--                                        </li>-->
								<li><a tabindex="-1" href="#" id="algo8" title="网络中的特征向量中心性">特征向量中心性</a>
								</li>
								<li><a tabindex="-1" href="#" id="algo9" title="网络中的加载中心性">加载中心性</a>
								</li>
							</ul>
						</span>
						<p></p>
					</div>
					<div class="boxnav" style="height:400px;">
						<!--左下-->

						<div id="metric" class="biankuang main_bottom_b_con3"></div>
					</div>
				</div>
			</li>
			<li style="width:56%">

				<div class="box" style="position: relative;">
					<div class="map" style="position: absolute;top: 130px;left: 235px; width: 55%;height: 55%;">
						<div class="map1"><img src='{{ url_for("static",filename="picture/model-images/lbx.png") }}'></div>
						<div class="map2"><img src='{{ url_for("static",filename="picture/model-images/jt.png") }}'></div>
						<div class="map3"><img src='{{ url_for("static",filename="picture/model-images/map.png") }}'></div>
					</div>

					<div class="" id="map" style="height: 600px; position: relative; z-index: 100">
						<!--中心-->
						<div class="main_bottom_b_title">
                            <div class="btn-group cus_btn">
                                <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle"
                                    style="width: 100%;
									background-color: transparent; border-width: 0px; font-size: 20px;
                                    border-image: -webkit-linear-gradient(rgb(85, 87, 231), rgb(149, 228, 241)) 20 20;
                                    border-image: -moz-linear-gradient(rgb(85, 87, 231), rgb(149, 228, 241)) 20 20;
                                    border-image: -o-linear-gradient(rgb(85, 87, 231), rgb(149, 228, 241)) 20 20;
                                    border-image: linear-gradient(rgb(85, 87, 231), rgb(149, 228, 241)) 20 20;">
                                    选择数据集<span class="caret"></span>
								</button>
                                <ul class="dropdown-menu dropdown-menu-addon">
                                    <li class="dropdown-submenu"><a tabindex="-1" href="#">一般网络</a>
                                        <ul class="dropdown-menu dropdown-menu-addon" tabindex="-1" id="choose_dataset">
                                            <li><a href="#" id="barbell" title="一个手动添加的对称网络">barbell</a></li>
                                            <li><a href="#" id="brazil-flights" title="巴西航班网络">brazil-flights</a>
                                            </li>
                                            <li><a href="#" id="europe-flights" title="欧洲航班网络">europe-flights</a>
                                            </li>
                                            <li><a href="#" id="hospital" title="病人、医生和护士之间的临时接触网络">hospital</a>
                                            </li>
                                            <li><a href="#" id="mouzuzhi" title="某组织开放数据集">某组织开放数据集</a></li>
                                        </ul>
                                    </li>
                                    <li class="dropdown-submenu"><a tabindex="-1" href="#">异构网络</a>
                                        <ul class="dropdown-menu dropdown-menu-addon" tabindex="-1" id="choose_dataset1">
                                            <li><a href="#" id="dblp" title="一个引文网络">dblp</a></li>
                                            <li><a href="#" id="review-graph" title="电影评论网络">review-graph</a></li>
                                            <li><a href="#" id="upaper" title="某大学学位论文与导师">2019年某大学学位论文导师学院分布</a></li>
                                        </ul>
									</li>
                                </ul>
                            </div>
                        </div>
                        <h3 style="text-align: center;color: white" id="dataset_title"></h3>
                        <div id="contentId" class="biankuang main_bottom_b_con main_bottom_b_con2"><!--在此显示--></div>
					</div>

				</div>
				<div class="box">
					<div class="tit"><span>算法</span>
						<p></p>
					</div>
					<div class="boxnav">
						<ul class="jcjg" style="height: 100%; display: flex; list-style: none; padding: 0; margin: 0;">
							<li class="center-down" style="flex: 0 0 35%;">
								<h3>网络属性</h3>
								<div class="jcnav">
									<!--中下最左边-->
									<div class="main_bottom_b_con">
										<div class="t_btn">
											<table width="95%">
												<thead>
												</thead>
												<tbody>
													<tr>
														<th>属性名</th>
														<th>属性值</th>
													</tr>
													<tr>
														<td>节点数</td>
														<td id="jiedianshu">131</td>
													</tr>
													<tr>
														<td>边数</td>
														<td id="bianshu">1074</td>
													</tr>
													<tr>
														<td>网络密度</td>
														<td id="wangluomidu">0.0006</td>
													</tr>
													<tr>
														<td>最大度</td>
														<td id="zuidadu">25</td>
													</tr>
													<tr>
														<td>最小度</td>
														<td id="zuixiaodu">1</td>
													</tr>
													<tr>
														<td>平均度</td>
														<td id="pingjundu">18.3</td>
													</tr>
													<!--
													<tr>
														<td>去除自环后_聚类系数</td>
														<td id="juleixishu">点击一般属性获取</td>
													</tr>
													<tr>
														<td>自环数</td>
														<td id="zihuanshu">点击一般属性获取</td>
													</tr>
													<tr>
														<td>度相似性</td>
														<td id="duxiangsixing">点击一般属性获取</td>
													</tr>
													-->
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</li>
							<li style="flex: 0 0 65%; height: 100%;"> <!-- 外层 li 固定高度 -->
								<ul style="
								  display: flex;
								  flex-direction: column;
								  height: 100%;
								  margin: 0;
								  padding: 0;
								  gap: 0;             
								">
								  <!-- 算法简介 -->
								  <li style="
									flex: 1;
									min-height: 0;
									width: 100%;
									margin: 0;
									padding: 0;
									overflow: hidden;
								  ">
									<h3 style="margin: 0 0 2px 0;">算法简介</h3>
									<div class="jcnav center-down" style="
									  overflow-x: auto;
									  width: 100%;
									  height: calc(100% - 22px);
									  white-space: nowrap;
									">
									  <div id="algoIntro" style="
										min-width: fit-content;
										display: inline-block;
										padding: 8px;
									  ">
										示例内容：这是一个很长的算法简介，用于测试横向滚动条的效果。内容会超出容器宽度。
									  </div>
									</div>
								  </li>
							  
								  <!-- 运行结果 -->
								  <li style="
									flex: 1;
									min-height: 0;
									width: 100%;
									margin: 0;
									padding: 0;
									overflow: hidden;
								  ">
									<h3 style="margin: 2px 0 2px 0;">运行结果</h3> <!-- 微调上下间距 -->
									<div class="jcnav center-down jcnav2" style="
									  overflow-x: auto;
									  width: 100%;
									  height: 100px;
									  white-space: nowrap;
									">
									  <div id="algoRes" style="
										min-width: 65%;
										display: inline-block;
										padding: 8px;
									  ">
										示例内容：这是运行结果，同样很长，用于测试横向滚动条。内容会超出容器宽度。
									  </div>
									</div>
								  </li>
								</ul>
							  </li>
						</ul>

					</div>
				</div>
			</li>
			<li style="width: 22%">
				<div class="box">
					<div class="tit">
						<span class="btn-group cus_btn btn-group-xs" style="width: 120px">
							<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle"
								style="width: 100%; background-color: transparent; border-width: 0px; font-size: 20px;">
								链路预测
							</button>
							<ul class="dropdown-menu dropdown-menu-addon" id="linkAlgo">
								<li><a href="#" id="algo10" title="计算未连边的节点之间有边的概率">resourceAllocationIndex</a>
								</li>
								<li><a href="#" id="algo11" title="对网络中的节点之间有无边进行预测，即概率的计算">jaccardCoefficient</a>
								</li>
								<li><a href="#" id="algo12" title="通过 Adamic-Adar index算法进行链接预测">adamicAdarIndex</a>
								</li>
								<!-- <li><a href="#" id="algo13" title="通过偏好连接方法对节点进行评分">preferentialAttachment</a> -->
								<!-- </li> -->
								<!--<li><a href="#" id="CommonNeighborsIndex" title="">Common Neighbors
										Index</a>
								</li>-->
							</ul>
						</span>
						<p></p>
					</div>
					<div class="boxnav" id="" style="height: 310px;">
						<!--右上-->

						<div id="linkPrediction" class="biankuang main_bottom_b_con3"></div>
					</div>
				</div>
				<div class="box">
					<div class="tit">
						<span class="btn-group cus_btn btn-group-xs" style="width: 120px">
							<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle"
								style="width: 100%; background-color: transparent; border-width: 0px; font-size: 20px;">
								社团检测
							</button>
							<ul class="dropdown-menu dropdown-menu-addon" id="communityAlgo">
								<li><a href="#" id="algo14"
										title="利用异步的fluid社团检测方法对社团进行划分，该算法需要提前指定社团个数">asyFluidc</a>
								</li>
								<li><a href="#" id="algo15" title="利用异步标签传播算法对网络进行社团划分">asynLpaCommunities</a>
								</li>
								<!--将labelPropagation替换成autoencoder-->
								<li><a href="#" id="algo16">autoencoder</li>
								<!--<li><a href="#" id="algo16">labelPropagation</a></li>-->
							</ul>
						</span>
						<p></p>
					</div>
					<div class="boxnav" style="height: 400px;" id="echart7">
						<!--右下-->

						<div id="communityDetect" class="biankuang main_bottom_b_con3"></div>
					</div>
				</div>


			</li>
		</ul>
	</div>
	<!--废物-->
	<div style="display: none">
		<div id="network2" class="main_bottom_b_con3"></div>
		<div id="role_network" class="main_bottom_b_con3" style="display: none">
			<div style="width: 40%;float: left">
				<div id="classification" style="height: 50%"></div>
				<div id="pca" style="height: 50%"></div>
			</div>
			<div style="width: 60%;float: right">
				<div id="kmeans" style="width: 100%;height: 90%;margin: auto"></div>
			</div>
		</div>
		<div class="main_bottom_bottom">
			<div class="main_bottom_top_list">
				<div class="main_bottom_t_l_title">算法介绍</div>
				<div class="main_bottom_t_l_con">
					<div id="algoIntro" class="test"></div>
				</div>
			</div>
			<div class="main_bottom_top_list">
				<div class="main_bottom_t_l_title">算法运行结果
					<button class="btn btn-xs" style="margin-top: -0.5%;background-color: #00b4ef"
						id="Download">
						下载
					</button>
				</div>
				<div class="main_bottom_t_l_con">
					<div id="algoRes" class="test">

					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</body>

</html>

<script src='{{ url_for("static",filename="js/complex/dataScoll.js") }}'></script>
<script src='{{ url_for("static",filename="js/complex/digitalScroll.js") }}'></script>
<script src='{{ url_for("static",filename="js/complex/jcarousellite.js") }}'></script>
<script src='{{ url_for("static",filename="js/complex/particles.min.js") }}'></script>
<script src='{{ url_for("static",filename="js/complex/app.js") }}'></script>
<script src='{{ url_for("static",filename="js/require.js") }}'></script>
<script src='{{ url_for("static",filename="js/config.js") }}'></script>
<script src='{{ url_for("static",filename="js/complex/complex_copy.js") }}'></script>
